import { defineComponent, ref, onMounted, computed } from 'vue';
import BreadCrumb from '~/src/components/BreadCrumb';
import ButtonSelect from '~/src/components/ButtonSelect';
import Item from '~/src/components/ButtonSelect/item';
import ButtonTag from '~/src/components/ButtonTag';
import Input from '~/src/components/Input';
import Pagination from '~/src/components/Pagination';
import SelectTag from '~/src/components/SelectTag';
import Table from '~/src/components/table';
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import zwsj from "@/assets/images/zwsj.png";

// 定义数据类型
interface OptionItem {
    label: string;
    value: string;
}

interface TableItem {
    id: number;
    name: string;
    specification: string;
    unit: string;
    price: string;
}

export default defineComponent({
    setup() {
        const selectKey = ref('');
        const options = ref<OptionItem[]>([]);
        const tableData = ref<TableItem[]>([]);
        // const loading = ref(true);
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;

        // 模拟的选项假数据
        const mockOptions: OptionItem[] = [
            { label: '药品', value: 'yp' },
            { label: '项目', value: 'xm' },
            { label: '材料', value: 'cl' }
        ];

        // 模拟的表格假数据
        const mockTableData = {
            // 药品数据
            yp: [
                { id: 1, name: '氨茶碱片', specification: '0.1g*100片', unit: '瓶', price: '7.57' },
                { id: 2, name: '氨茶碱注射液', specification: '10ml:0.25g', unit: '瓶', price: '1.90' },
                { id: 3, name: '地西泮(安定)片', specification: '2.5mg*100000片', unit: '盒', price: '22.00' },
                { id: 4, name: '布洛芬片', specification: '0.1g*100片', unit: '瓶', price: '5.20' },
                { id: 5, name: '布洛芬混芬混芬混悬液', specification: '100ml:2g', unit: '瓶', price: '1112.80' },
                { id: 7, name: '头孢拉定胶囊', specification: '0.25g*24000粒', unit: '盒', price: '1115.60' },
                { id: 8, name: '头孢曲松钠注射液', specification: '00001.0g/支', unit: '支', price: '1119.30' },
                { id: 9, name: '左氧氟沙星片', specification: '0.5g*14片', unit: '盒', price: '211118.50' },
                { id: 10, name: '左氧氟沙星注射液', specification: '100ml:0.5g', unit: '瓶', price: '111118.70' },
                { id: 6111, name: '阿司匹林阿司匹林阿司匹林阿司匹林阿司匹林', specification: '1000mg*30片', unit: '盒', price: '1111118.90' },
                { id: 11, name: '葡萄糖注射液', specification: '500ml:25g', unit: '瓶', price: '3.10' },
                { id: 12, name: '氯化钠注射液', specification: '250ml:2.25g', unit: '瓶', price: '2.80' },
                { id: 13, name: '维生素C片', specification: '0.1g*100片', unit: '瓶', price: '4.50' },
                { id: 14, name: '维生素C注射液', specification: '2ml:0.5g', unit: '支', price: '1.20' },
                { id: 15, name: '维生素B6片', specification: '10mg*100片', unit: '瓶', price: '3.80' },
                { id: 16, name: '维生素B6注射液', specification: '1ml:50mg', unit: '支', price: '0.90' },
                { id: 17, name: '盐酸氨溴索口服溶液', specification: '100ml:300mg', unit: '瓶', price: '19.80' },
                { id: 18, name: '盐酸氨溴索注射液', specification: '2ml:15mg', unit: '支', price: '3.50' },
                { id: 19, name: '硝苯地平片', specification: '10mg*100片', unit: '瓶', price: '6.70' },
                { id: 20, name: '硝苯地平控释片', specification: '30mg*7片', unit: '盒', price: '25.30' },
                { id: 21, name: '辛伐他汀片', specification: '20mg*10片', unit: '盒', price: '9.20' },
                { id: 22, name: '阿托伐他汀钙片', specification: '20mg*7片', unit: '盒', price: '32.60' },
                { id: 23, name: '马来酸氯苯那敏片', specification: '4mg*100片', unit: '瓶', price: '2.90' },
                { id: 24, name: '氯雷他定片', specification: '10mg*6片', unit: '盒', price: '11.50' },
            ],
            // 项目数据
            xm: [
            ],
            // 材料数据
            cl: [
                { id: 1, name: '医用口罩', specification: '一次性', unit: '个', price: '1.50' },
                { id: 2, name: '手术手套', specification: '无菌', unit: '副', price: '3.20' },
                { id: 3, name: '注射器', specification: '5ml', unit: '支', price: '0.80' },
                { id: 4, name: '针管', specification: '0.5ml*10支', unit: '支', price: '1.20' },
                { id: 5, name: '针具', specification: '10支', unit: '支', price: '1.50' },
                { id: 6, name: '止痛药', specification: '一次性', unit: '片', price: '1.80' },
                { id: 7, name: '止痛剂', specification: '一次性', unit: '支', price: '1.80' },
                { id: 8, name: '止痛针', specification: '一次性', unit: '支', price: '1.80' },
                { id: 9, name: '止痛液', specification: '100ml*10支', unit: '支', price: '1.80' },
                { id: 10, name: '止痛膏', specification: '一次性', unit: '瓶', price: '1.80' },
            ]
        };

        // 初始化数据
        const initData = () => {

                // 设置选项数据
                options.value = mockOptions;

                // 默认选中第一个选项
                if (options.value.length > 0) {
                    selectKey.value = options.value[0].value;

                    // 加载对应表格数据
                    tableData.value = mockTableData[selectKey.value as keyof typeof mockTableData] || [];
                }


        };

        // 监听选项变化，更新表格数据
        const handleSelectChange = (value: any) => {
            selectKey.value = value.value;
            tableData.value = mockTableData[value.value as keyof typeof mockTableData] || [];
        };

        // 组件挂载时初始化数据
        onMounted(() => {
            initData();
        });
        //  分页组件数据更新 分页当前页 展示的数据
        const showDatas = ref();
        const handlePageChange = (Datas:any) => {
            showDatas.value = Datas;
        };
        return () => (
            <div class={Style.top}>
                <UserInfo></UserInfo>
                <div class={Style.container_mar} >
                    <div class={Style.body}>
                        <div style={{margin: '40px 0'}} class={Style.title}>
                            <div style={{ display: 'flex' }}>
                                {
                                    <ButtonSelect
                                        v-model={selectKey.value}
                                        onChange={handleSelectChange}
                                    >
                                        {options.value.map((option, index) => (
                                            <Item
                                                key={option.value}
                                                label={option.label}
                                                value={option.value}
                                                class={[Style.tag, selectKey.value === option.value ? Style.active : ""]}
                                                style={index > 0 ? { marginLeft: '16px' } : {}}
                                            ></Item>
                                        ))}
                                    </ButtonSelect>
                                }
                            </div>

                            <div class={Style.search}>
                                <Input placeholder='输入科室首字母'></Input>
                            </div>

                        </div>
                        {tableData.value.length > 0 ?
                            <Table
                            style={{width:"90%",fontSize:"23px"}}
                            data={showDatas.value}
                            ></Table> :
                            <div style={{marginTop:'-5%'}}>
                                <img src={zwsj} style={{width:'100%',height:'100%'}}/>
                            </div>
                        }

                    </div>
                    <Pagination
                        style={{margin: '0 63px'}}
                        pageSize={7}
                        Data={tableData.value}
                        onPageChange={handlePageChange}
                    ></Pagination>
                </div>
            </div>
        );
    }
})

